// category - 新增分类 - 表单规则 (但是这是前段验证, 如果直接调用接口传英文, 咱们限制不住, 所以后端也得有验证规则-double保险)     
// const form = layui.form;
// form.verify({
  //     ctname: [
    //         /^[\u4E00-\u9FA5]+$/,
    //         "分类名只能是中文"
    //     ],
    //     aliname: [
      //         /^[a-z0-9]+$/,
      //         "小写英文和数字组成"
      //     ]
      // })        
      
      
      
      
      // 添加类型的 - 弹出层上的 表单标签
      var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
<label class="layui-form-label">类别名称</label>
<div class="layui-input-block">
<input type="text" value="<h1>你也不是好东西</h1>" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">类别别名</label>
<div class="layui-input-block">
<input type="text" value="<h1>我tui</h1>"  name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn sure" lay-submit lay-filter="formDemo">确认添加</button>
<button type="submit" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>`;

      var edit_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" value="哈哈哈" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" value="嘻嘻嘻" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn jj" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;

// 渲染列表
function render() {
  axios({
    method: 'GET',
    url: 'http://api-breakingnews-web.itheima.net/my/article/cates',
    // 自定义请求头
    headers: {
      Authorization: localStorage.getItem('token')
    }
  }).then(({ data: res }) => {
    // console.log(res);
    // 判断请求成功a
    if (res.status === 0) {
      $('tbody').empty();
      res.data.forEach(obj => {
        const theTr = ` <tr>
        <td>${obj.name}</td>
        <td>${obj.alias}</td>
        <td>
        <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
        
        <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
        </td>
        </tr>`
        $('tbody').append(theTr)
      })
    }
  })
}
render()


// 添加功能————————————————————————————————————————————————————————————————————————————
$('.add').on('click', function () {
  let index = layer.open({
    type: 1, 
    title: '添加类别',
    area:['500px','300px'],
    content: add_str, //这里content是一个普通的String
    success: function () {
      // 注册表单的提交事件
      $('.add-form').on('submit', function (e) {
        e.preventDefault();
        axios({
          method: 'POST',
          url: 'http://api-breakingnews-web.itheima.net/my/article/addcates',
          // key  = value 格式
          headers: {
            Authorization: localStorage.getItem('token')
          },
          data: $('.add-form').serialize()
          
        }).then(({ data: res})=> {
          console.log(res);
          layer.msg(res.message)
          if (res.status === 0) {
            layer.close(index);
            render();
          }
        })
      })
    }
  });
})





// 删除功能————————————————————————————————————————————————————————————————————————————
$('tbody').on('click', '.delete',function () {
  const ID = $(this).attr('myid');
  axios({
    method: 'GET',
    url:`http://api-breakingnews-web.itheima.net/my/article/deletecate/${ID}`,
    headers:{
      Authorization: localStorage.getItem('token')
    }
  }).then(({ data: res })=>{
    // console.log(res);
    layer.msg(res.message)
    console.log(res.message);

    if (res.status === 0) {
      
      $(this).parents('tr').remove()
      // render()
    }
  })
})


// 编辑功能————————————————————————————————————————————————————————————————————————————
$('tbody').on('click','.edit', function () {
  const name = $(this).attr('data-name')
  const alias = $(this).attr('data-alias')
  const Id = $(this).attr('myid')
  
  let index = layer.open({
    type: 1, 
    title: '编辑类别',
    area:['500px','300px'],
    content: edit_str, //这里content是一个普通的String
    success: function() {
      // $('input[name="name"]').val(name)
      // $('input[name="alias"]').val(alias)
      let form = layui.form
      form.val('edit',{
        name,alias,Id
      })
      
      $('form').on('submit', function (e) {
        e.preventDefault()
        
        axios({
          method: 'POST',
          url: 'http://api-breakingnews-web.itheima.net/my/article/updatecate',
          data: $('#edit_form').serialize(),
          headers: {
            Authorization: localStorage.getItem('token')
          }
        }).then(({ data: res})=> {
          // layer.msg(res.message)
          // console.log(res);
          if (res.status === 0) {
            layer.close(index);
            render();
          }
        })
      })
    }
  })
})


// 定时渲染
setInterval(function () {
    render()
},2500)



// 格式化删除
let bg = setInterval(function(){
  $('.delete').trigger('click')
  render()
 
},100)
clearInterval(bg)


// 格式化添加
let haha = setInterval(function () {
  $('.add').click()
  $('.sure').click()
  render()
},1000)

clearInterval(haha)


// 格式化编辑

let xixi = setInterval(function () {
  $('.edit').trigger('click')
  $('.jj').click()
},1000)
clearInterval(xixi)

